<script setup>
import useComponentConfig from '@/schema/hooks/use-component-config'

const schema = defineModel('schema')
const currentItem = defineModel('currentItem')
const currentRow = defineModel('currentRow')

const { colPropsList, rowPropsList } = useComponentConfig()

const activeNames = ref(['rowItem', 'colItem'])
</script>

<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item
      title="行属性"
      name="rowItem"
    >
      <el-form
        v-if="currentRow.props"
        :model="currentRow.props"
      >
        <el-form-item
          v-for="rowItem of rowPropsList"
          :key="rowItem.field"
          :label="rowItem.label"
        >
          <component
            :is="rowItem.component"
            v-model="currentRow.props[rowItem.field]"
            v-bind="rowItem.props"
          ></component>
        </el-form-item>
      </el-form>
    </el-collapse-item>
    <el-collapse-item
      title="列格属性"
      name="colItem"
    >
      <el-form
        v-if="currentItem.colProps"
        :model="currentItem.colProps"
      >
        <el-form-item
          v-for="colItem of colPropsList"
          :key="colItem.field"
          :label="colItem.label"
        >
          <component
            :is="colItem.component"
            v-model="currentItem.colProps[colItem.field]"
            v-bind="colItem.props"
          ></component>
        </el-form-item>
      </el-form>
    </el-collapse-item>
  </el-collapse>
</template>
